import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, FlatList } from 'react-native';
// import Fetching from 'react-async-fetching';
import Fetching from './form/Fetching';
import Loading from './Loading';
import Error from './Error';
import Form from './form/Form';
import QList from './form/QList';
import { items } from './form';
function delay(time = 1000) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

Fetching.defaultProps = {
  loading: <Loading />,
  error: (props) => <Error {...props} />,
};

export default class Home extends Component {
  async fetch(page) {
    await delay(2000);
    // throw 'ERROR: XXX';
    // return React.createElement((await import('./Error')).default, {
    //   error: 'xxx',
    // });
    return {
      items: [{ a: 'A' }, { a: 'A2' }, { a: 'A' }, { a: 'A2' }, { a: 'A' }, { a: 'A2' }],
      end: page >= 12,
    };
  }
  state = {
    data: 'BBBB',
  };

  async componentDidMount() { }
  render() {
    return (
      <Fetching fetch={this.fetch}>
        {({ data, loading, error }) => {
          return (
            <ScrollView
              contentInsetAdjustmentBehavior="automatic"
              style={styles.scrollView}>
              <Image source={require('./5f671f71-a0c0-4225-8f07-0ad73ceba545.jpeg')} />
              <Form
                defaultForm={{
                  name: 'Grant',
                  age: 22,
                  sex: 'FAMALE',
                  birthday: '2020-03-04T05:36:43.330Z',
                  // test: '12',
                  // _test: {
                  //   label: '選項二',
                  //   value: '12',
                  // },
                  testMultiple: ['12', '13'],
                  _testMultiple: [
                    {
                      label: '選項二',
                      value: '12',
                    },
                    {
                      label: '選項三',
                      value: '13',
                    },
                  ],
                }}
                onSubmit={(formData) => {
                  alert(JSON.stringify(formData));
                }}
                formItems={items}
              />
            </ScrollView>
          );
        }}
      </Fetching>
    );
    // return (
    //   <QList
    //     fetch={this.fetch}
    //     renderItem={() => {
    //       return (
    //         <View style={{padding: 20}}>
    //           <Text>AA</Text>
    //         </View>
    //       );
    //     }}
    //   />
    // );
  }
}
const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: '#f0f0f0',
  },
});
